<template>
  <div class="container">
    <div class="find-content-box">
      <div class="find-top" v-show="topShow">
        <div class="find-main">
          <ul class="flex-box">
            <li class="flex-box">
              <img src="../assets/img/find-top-icons-01.png" alt="">
              <p>商城</p>
            </li>
            <li class="flex-box">
              <img src="../assets/img/find-top-icons-02.png" alt="">
              <p>积分</p>
            </li>
            <li class="flex-box">
              <img src="../assets/img/find-top-icons-03.png" alt="">
              <p>圈子</p>
            </li>
            <li class="flex-box">
              <img src="../assets/img/find-top-icons-04.png" alt="">
              <p>公益</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="find-nav">
        <div class="find-nav-main">
          <swiper :options="swiperNav" id="swiper-nav" ref="SwiperNav">
            <swiper-slide 
              v-for="(item, index) in findNavs" 
              :key="index"
              class="flex-box"
              :class="{active:navIndex===index}"
              ><p>{{item}}</p></swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="find-container">
        <scroller :on-refresh="refresh" :on-infinite="infinite" ref="find_main"> 
          <div class="mui-content mui-scroll-wrapper" id="pullRefresh-find">
            <div class="mui-scroll">
              <ul>
                <li v-for="(item, index) in findLists" :key="index">
                  <div class="img-box loading-bg flex-box">
                    <img :src="require('../assets/img/' + item.img)" alt="">
                  </div>
                  <h3>{{item.title}}</h3>
                  <div class="msg-box">
                    <span><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-life-yanjing"></use>
                      </svg></span>
                    <p>{{item.views}}</p>
                    <span><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-life-xiaoxi"></use>
                      </svg></span>
                    <p>{{item.message}}</p>
                  </div>
                  <div class="share">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-life-share-video"></use>
                    </svg>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name: 'home',
  data() {
    return {
      navIndex: 0,
      findNavs: ['精选', '基因', '自然', '奇趣', '生活', '科技', '人文'],
      topShow: true,
      movePosition: {
        startX: '',
        startY: '',
        moveX: '',
        moveY: '',
        endX: '',
        endY: ''
      },
      findLists: [
        {
          img: 'find-ing-a01.jpg',
          title: '妈妈救罕见病儿上演现实版“我不是药神”“我不是药神”',
          views: 45,
          message: 45
        },
        {
          img: 'find-ing-a01.jpg',
          title: '妈妈救罕见病儿上演现实版“我不是药神”“我不是药神”',
          views: 45,
          message: 45
        },
        {
          img: 'find-ing-a01.jpg',
          title: '妈妈救罕见病儿上演现实版“我不是药神”“我不是药神”',
          views: 45,
          message: 45
        },
        {
          img: 'find-ing-a01.jpg',
          title: '妈妈救罕见病儿上演现实版“我不是药神”“我不是药神”',
          views: 45,
          message: 45
        }
      ],
      swiperNav: {
        slidesPerView: 'auto',
        freeMode: true,
        resistanceRatio: 0, // 禁止边缘抵抗
        touchAction: 'none',
        on: {
          tap: () => {
            this.navIndex = this.mySwiperJD.clickedIndex
          }
        }
      }
    }
  },
  components: {},
  computed: {
    mySwiperJD() {
      return this.$refs.SwiperNav.swiper
    }
  },
  methods: {
    refresh() {
      console.log('refresh')
      this.timeout = setTimeout(() => {
        this.$refs.find_main.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.timeout = setTimeout(() => {
        this.$refs.find_main.finishInfinite(true)
      }, 1000)
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  padding-bottom: 50px;
  box-sizing: border-box;
  .find-content-box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .find-top {
      height: r(88);
      bottom: unset;
      left: unset;
      position: relative;
      .find-main {
        height: 100%;
        ul {
          height: 100%;
          li {
            width: 25%;
            flex-wrap: wrap;
            a {
              margin-top: r(4);
            }
            img {
              width: r(36);
              height: r(36);
            }
            p {
              font-size: r(14);
              line-height: r(28);
              margin-top: 0;
              text-align: center;
              width: 100%;
              color: #8f8f94;
            }
          }
        }
      }
    }
    .find-nav {
      width: 100%;
      height: r(58);
      background: #f9fafd;
      position: relative;
      float: left;
      z-index: 666;
      .find-nav-main {
        width: 100%;
        height: 100%;
        padding-left: r(15);
        padding-right: r(15);
        box-sizing: border-box;
        background: #f9fafd;
        z-index: 66;
      }
      .swiper-container {
        height: 100%;
      }
      .swiper-slide {
        width: auto;
        height: 100%;
        padding-top: 0;
        padding-left: r(12);
        padding-right: r(12);
        box-sizing: border-box;
        color: #999999;
        font-size: r(16);
        line-height: r(26);
        &.active {
          p {
            color: #000;
            border-bottom: 2px solid #000;
          }
        }
      }
    }
    .find-container {
      width: 100%;
      float: left;
      height: calc(100% - 146px);
      background: none;
      box-sizing: border-box;
      background: #f9fafd;
      position: relative;
      .swiper-container {
        width: 100%;
        height: 100%;
        .swiper-slide {
          width: 100%;
          height: 100%;
        }
      }
      .mui-content {
        background: none;
      }
      .mui-scroll {
        padding-left: r(16);
        padding-right: r(16);
        padding-top: r(0);
        box-sizing: border-box;
        transition: all 0.8s ease;
        -webkit-transition: all 0.8s ease;
      }
      ul {
        display: block;
        li {
          width: 100%;
          padding-top: r(16);
          background: #fff;
          border-radius: r(8);
          box-sizing: border-box;
          padding-left: r(16);
          padding-right: r(16);
          position: relative;
          overflow: hidden;
          margin-bottom: r(16);
          box-shadow: 0 4px 12px rgba($color: #000000, $alpha: 0.1);
          .img-box {
            width: 100%;
            height: r(175);
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          h3 {
            margin-top: r(18);
            font-size: r(16);
            line-height: r(24);
          }
          .msg-box {
            width: 100%;
            height: r(20);
            margin-top: r(14);
            margin-bottom: r(16);
            span,
            p {
              display: block;
              float: left;
              font-size: r(16);
              line-height: r(20);
              color: #666;
              margin-right: r(8);
            }
            p {
              font-size: r(12);
              margin-right: r(16);
            }
          }
          .share {
            position: absolute;
            right: r(16);
            bottom: r(16);
            font-size: r(24);
          }
        }
      }
    }
  }
}
</style>
